<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="count++">修改count{{count}}</button>
    <br/>
    <button @click="obj.name='xiaolong'">修改obj里面的值</button>
    <br/>
    <button @click="obj={name:'xiaolong',age:20,hobby: ['羽毛球']}">替换obj里面的值</button>
    <br/>
    <button @click="obj.hobby.push('篮球')">obj里面的值变化</button>
    <br/>
    <button @click="obj.hobby=['羽毛球']">obj里面的值替换</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import {ref,watch} from "vue";
let count = ref(5)
watch(count,(newVal,oldVal)=>{
    return  console.log("count修改了",newVal,oldVal)
})
let obj = ref({
    name:"xiaowang",
    age:12,
    hobby:["篮球","足球"]
})
// //当obj内部的value修改必须深度监听才能监听到,直接替换value可以被监听到
watch(obj,(newVal,oldVal)=>{
    console.log("修改obj",newVal,oldVal)
},{deep:true})
//监听修改obj里面的值,监听不了替换的值
watch(obj.value,(newVal,oldVal)=>{
    console.log("修改obj.value",newVal,oldVal)
})
//里面的值变化能被监听,当被替换就不能被监听
watch(obj.value.hobby,(newVal,oldVal)=>{
    console.log("修改obj.value",newVal,oldVal)
})

watch(()=>obj.value.age,
    (newVal,oldVal)=>{
    console.log("修改基本类型值")
})
</script>
